<template>
    <div>
         <div class="formContain">
            <titlebar :title-left='titleLeft1'></titlebar>
            <ul>
                <li class="flex">
                    <span class="label"><i class="require" v-if="isFirstTask == '00901'">*</i>开始时间</span>
                    <div v-if="isFirstTask == '00900'">
                        <span>{{myactdatas.startTime}}</span>
                    </div>
                    <div @click="showdatepicker($event,'startTime')" v-if="isFirstTask == '00901'">
                      <input type="text"  id="begin" placeholder="请选择时间" :value="myactdatas.startTime"  readonly>
                      <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
                    </div>
                </li>
                 <li class="flex">
                    <span class="label"><i class="require" v-if="isFirstTask == '00901'">*</i>结束时间</span>
                    <div v-if="isFirstTask == '00900'">
                        <span>{{myactdatas.endTime}}</span>
                    </div>
                   <div @click="showdatepicker($event,'endTime')" v-if="isFirstTask == '00901'">
                     <input type="text"  id="end" placeholder="请选择时间" :value="myactdatas.endTime"  readonly>
                     <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
                   </div>
                </li>
                  <li class="flex">
                     <span class="label"><i class="require" v-if="isFirstTask == '00901'">*</i>出发地</span>
                    <div v-if="isFirstTask == '00900'">
                        <span>{{myactdatas.startPlace}}</span>
                    </div>
                    <div v-if="isFirstTask == '00901'">
                      <van-field v-model="myactdatas.startPlace" placeholder="请输入出发地" type="text" input-align="right"/>
                    </div>
                </li>
                 <li class="flex">
                    <span class="label"><i class="require" v-if="isFirstTask == '00901'">*</i>目的地</span>
                    <div v-if="isFirstTask == '00900'">
                        <span>{{myactdatas.endPlace}}</span>
                    </div>
                   <div  v-if="isFirstTask == '00901'">
                     <van-field v-model="myactdatas.endPlace" placeholder="请输入目的地" type="text" input-align="right"/>
                   </div>
                </li>
                <li class="flex">
                    <span class="label"><i class="require" v-if="isFirstTask == '00901'">*</i>中转地</span>
                    <div v-if="isFirstTask == '00900'">
                        <span>{{myactdatas.transferPlace}}</span>
                    </div>
                    <div v-if="isFirstTask == '00901'">
                      <van-field v-model="myactdatas.transferPlace" placeholder="请输入中转地" type="text" input-align="right"/>
                    </div>
                </li>
                <li class="flex">
                    <span class="label">出差天数</span>
                    <div v-if="isFirstTask == '00900'">
                        <span>{{myactdatas.businessAmount}}</span>
                    </div>
                  <div v-if="isFirstTask == '00901'">
                    <van-field v-model="myactdatas.businessAmount" maxlength="6" @input="checkNum" placeholder="请输入天数" type="number" input-align="right"/>
                  </div>
                </li>
                <li class="flex">
                    <span class="label"><i class="require" v-if="isFirstTask == '00901'">*</i>交通工具</span>
                    <div v-if="isFirstTask == '00900'">
                        <span><i style="font-style: inherit" v-for="(item,index) in result" :key="index">{{item+","}}</i></span>
                    </div>
                 <!-- <div @click="showpicker($event,'vehicles','交通工具')" v-if="isFirstTask == '00901'">
                    <input type="text"  id="type" placeholder="请选择交通工具" :value="myactdatas.vehicles.text"  readonly>
                    <input type="hidden"  placeholder="请选择交通工具" :value="myactdatas.vehicles.id"  readonly>
                    <span class="iconfont icon-xiala"></span>
                  </div>-->
                </li>
            </ul>
           <van-checkbox-group v-model="result" v-if="isFirstTask == '00901'">
             <van-checkbox
               v-for="(item, index) in list"
               :key="item.id"
               :name="item.text"
               class="vehicles"
             >
               {{ item.text }}
             </van-checkbox>
           </van-checkbox-group>
        </div>
         <div class="formContain">
            <titlebar :title-left='titleLeft2'></titlebar>
            <ul>
                <li class="flex">
                    <div class='full_width' style="min-height:2rem" v-if="isFirstTask == '00900'">
                        <van-field class='full_width' :value="myactdatas.remark" rows="1" autosize readonly="readonly" placeholder="请输入出差事由" type="textarea" input-align="left" disabled/>
                    </div>
                  <div class='full_width' style="min-height:2rem" v-if="isFirstTask == '00901'">
                    <i class="require">*</i>
                    <van-field class='full_width' :value="myactdatas.remark" rows="1" autosize  placeholder="请输入出差事由" type="textarea" input-align="left"/>
                  </div>
                </li>
                <li class="flex" v-if="isFirstTask == '00900'">
                  <span class="label">预览附件</span>
                  <div style="flex-grow: 1">
                    <!-- <input class="file" type="file"  id="type"  readonly> -->
                    <input type="hidden" v-model="datas.attachmentId">
                    <input type="text"  style="width: 10rem;background: #fff" v-model="fileName" disabled>
                    <span class="iconfont icon-yulan" style="font-size: 1rem" @click="downFile"></span>
                  </div>
                </li>
              <li class="flex" v-if="isFirstTask == '00901'">
                <span class="label">上传附件</span>
                <div>
                  <input type="text" v-model="fileName" disabled style="background: transparent;width: 10rem;position: absolute;padding-right: 1rem">
                  <van-uploader :after-read="afterRead" :before-read="beforeRead" id="file">
                    <span class="iconfont icon-hao"></span>
                  </van-uploader>
                </div>
              </li>
              <van-image-preview
                v-model="show1"
                :images="images"
              >
              </van-image-preview>
            </ul>
         </div>
      <van-picker id="picker"   show-toolbar  :title="title" v-show='pickershow' :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
      <van-datetime-picker v-show='show' id="datetime-picker" type="datetime" @confirm="datetimeSelect" @cancel='cancel' v-model="currentTime" />
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
     import titlebar from '@/components/titlebar3/titlebar3';
    import {vehicle,actdata,evevtionDay,uploadFile,downloadFile,downloadFileType} from '@/service/getData';
    import {getStore,getDefault} from '@/assets/config/mUtils';
    import { Dialog,Toast} from 'vant';
    export default {
    	data(){
            return{
                titleLeft1:'出差信息',
                titleLeft2:'出差事由',
                show:false, //控制日期显示隐藏
                pickershow:false,//控制下拉选显示隐藏
                pickerName:'',//当前控制日期的控件
                currentTime:new Date(),
                fileName:'',
                images:[],
                show1: false,
                screenHeight:'',
                datas:{
                  startTime:'',
                  endTime:'',
                  startPlace:'',
                  endPlace:'',
                  transferPlace:'',
                  businessAmount:'',
                  vehicles:'',
                  remark:'',
                  attachmentId:'',//附件id
                },
                title:'标题',//下拉框标题
                columns: [{"id":'3220000002',"text":"轮船"},{"id":'3220000002',"text":"火车"},{"id":'3220000002',"text":"飞机"}],
                myactdatas:'',
                list: [{"id":'3220000001',"text":"轮船"},{"id":'3220000002',"text":"火车"},{"id":'3220000003',"text":"飞机"}],
                result: [],
            }
        },
         props:['isFirstTask','procInstanceId'],
        created(){

        },
        mounted(){
          this.screenHeight = document.documentElement.clientHeight;
          //console.log(this.aa);
          this.$nextTick(function () {
            var defaultData = getDefault();
            vehicle(defaultData).then(res=>{
              this.list = res.data["3220"];
              var actData = {};
              actData.procInstanceId = this.procInstanceId;
              actData.app_userId = getStore('user_id');
              actData.CHECK_TIME = new Date().getTime();
              actData.CHECK_SIGN = this.$md5(actData.app_userId + actData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              actdata(actData).then(res=>{
                var resData = res.data.datas[0];
                var vehicletype = resData.vehicle.split(",");
                for(let i= 0 ;i<this.list.length;i++){
                  var curlist = this.list[i];
                  for(var j=0;j<vehicletype.length;j++){
                    var curvehicleid = vehicletype[j];
                    if(curvehicleid == curlist.id){
                      this.result.push(curlist.text);
                    }
                  };
                };
                this.myactdatas = resData;
                var data = {};
                data.fileId = this.myactdatas.attachmentId||"";
                //data.fileId = '08ed9a58d7184c1898def154c05be2ec';
                downloadFileType(data).then(res=>{
                  this.fileName = res.data;
                })
              })
            });
          })
        },
      updated () {
        let that = this;
        this.$nextTick(function () {
          let $inputs = Array.from(document.getElementsByTagName('input'));
          /*let body = document.body;
          $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略
              item.onblur = function () { // onblur是核心方法
                  clearTimeout(body.timer);
                  body.timer = setTimeout(() => {
                  window.scroll(0, 0);
                  window.innerHeight = window.outerHeight = that.screenHeight
                  }, 150)
              }
              item.onfocus = function () {
                  clearTimeout(body.timer)
              }
          })*/
          let body = document.body;
          $inputs.forEach(item => {
            item.onblur = function () { // onblur是核心方法
              window.scroll(0, 0);
              window.innerHeight = window.outerHeight = that.screenHeight;
              //console.log(that.screenHeight);
            }
          })
        })
      },
        components:{
            headTop,
            titlebar
        },
        computed:{
         /* myactdatas:function () {
            this.datas = this.myactdata;
            console.log(this.datas);
            /!*for(var i= 0 ;i<this.columns.length;i++){
              var columId = this.columns[i].id;
              this.myactdata.vehicles = this.columns[i];
            }*!/
            return this.myactdata
          },*/
         /* procInstanceId:function () {
            return this.procInstanceId
          }*/
        },
       watch:{
          myactdatas:{
            handler: function (newVal,oldVal) {
              this.$emit('childactdata',this.myactdatas)
            },
            deep: true
          },
          result:{
            handler: function (newVal,oldVal) {
              //console.log(this.result);
              this.$emit('resulttype',this.result)
            },
          }
        },
        methods:{
          checkNum(){
            this.datas.businessAmount = parseFloat(this.datas.businessAmount)
          },
          addZero(num){
            var addNum = num<10?"0"+num:num;
            return addNum;
          },
            datetimeSelect(value){
                this.show = false;
                var date =  new Date(value);
              var val = date.getFullYear() + '-'+this.addZero(date.getMonth()+1) + '-'+ this.addZero(date.getDate())+' '+this.addZero(date.getHours()) + ':'+ this.addZero(date.getMinutes());
                this.$set(this.myactdatas,this.pickerName,val);
                if(this.datas.endTime != ""){
                  if(this.datas.startTime >= this.datas.endTime){
                    Dialog.alert({
                      title: '',
                      message: '开始时间不能大于结束时间'
                    });
                    this.datas.endTime = '';
                  }
                };
//                if(this.myactdatas.startTime!=''&& this.myactdatas.endTime!= ''){
//                  var actData = {};
//                  actData.startTime = this.myactdatas.startTime;
//                  actData.endTime= this.myactdatas.endTime;
//                  actData.app_userId = getStore('user_id');
//                  actData.CHECK_TIME = new Date().getTime().toString();
//                  actData.CHECK_SIGN = this.$md5(actData.app_userId + actData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
//                  evevtionDay(actData).then(res=>{
//                    this.myactdatas.businessAmount = res.data || 0;
//                  });
//                }
                // document.getElementById(this.pickerName).value = val;
            },
            beforeRead(file) {
              var imgType = file.type.toLocaleLowerCase();
              if (imgType != 'image/jpg'&&imgType != 'image/jpeg'&&imgType != 'image/png'&&imgType != 'image/gif'&&imgType != 'image/bmp') {
                Toast('请上传图片');
                return false;
              }

              return true;
            },
            afterRead(file) {
              // 此时可以自行将文件上传至服务器
              Toast.loading({
                duration: 0,   // 持续展示 toast
                mask: true,
                message: '正在上传...'
              });
              //myactdatas.fileId
              var formData = new FormData();
              formData.append("uploadFile", file.file);
              uploadFile(formData).then(res=>{
                this.fileName = file.file.name;
                console.log(res);
                this.myactdatas.attachmentId = res.fileId;
                Toast.clear();
              })
            },
            downFile(){
              var data = {};
              //96c4cf9754b7492b91b53a8a44a5d74b    08ed9a58d7184c1898def154c05be2ec
              data.fileId = this.myactdatas.attachmentId||"";
              data.app_userId = getStore('user_id');
              data.CHECK_TIME = new Date().getTime().toString();
              data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              //判断有无附件
              downloadFileType(data).then(res=>{
                var fileType = res.data.split(".")[(res.data.split(".").length-1)];
                if(fileType == "jpg" ||fileType == "png"||fileType == "jpeg" ||fileType == "gif"||fileType == "bmp"&&res.code =="200"){
                  downloadFile(data).then(res=>{
                    //var blob = new Blob(res);
                    if(this.images.length == 0){
                      /*if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
                        this.images.push(window.webkitURL.createObjectURL(res));
                      }
                      else {
                        this.images.push(window.URL.createObjectURL(res));
                      }*/
                      this.images.push(res.data.imgurl)
                      this.show1 = true;
                    }else {
                      this.show1 = true;
                    }
                  });
                }else if(res.code=="400"&& fileType== ""){
                  Dialog.alert({
                    title: '提示',
                    message: '暂无附件'
                  })
                }else {
                  Dialog.alert({
                    title: '提示',
                    message: '文件类型在移动端不支持预览，请在PC端进行查看'
                  })
                }
              });

            },
            onConfirm(value){
                this.$set(this.myactdatas,this.pickerName,value);
                 this.pickershow = false;
            },
            cancel() {
                this.show = false;
            },
            onCancel(){
                this.pickershow = false;
            },
            showdatepicker(event,name){
                this.show = true;
                this.pickerName = name;
            },
            showpicker(event,name,title){
                this.pickershow = true;
                this.pickerName = name;
                this.title = title;
            }
        }
    }

</script>

<style lang="scss" scoped>
      @import '../../../../assets/style/mixin';
      @import '../../../../assets/style/public';
    .formContain{
        background: #fff;
        >table{
            width: 100%;
            border-collapse: collapse;
            td{
                font-size: .56rem;
                color: #444;
                border-bottom: 1px solid #e0e0e0;
                line-height: 2rem;
                text-align: center;
                width: 33.3%;
            }
        }
        ul{
            padding: 0 .54rem;
            .flex{
                justify-content: space-between;
                align-items: center;
                line-height: 2rem;
                border-bottom: 1px solid #e0e0e0;
                padding: 0 .3rem;
                &:nth-last-of-type(1){
                    border: none;
                }
                .label{
                    font-size: .56rem;
                    line-height: 2rem;
                    color: #333333;
                }
                .opinion{
                    font-size: .56rem;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 1.2rem;
                    letter-spacing: 0px;
                    color: #666666;
                    padding-bottom: .3rem;
                }
                div{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    position: relative;
                    flex-grow: 1;
                    span{
                        font-size: .56rem;
                        color: #333;
                    }
                    img{
                        width: .68rem;
                        height: .64rem;
                    }
                    input{
                        color: #323233;
                        text-align: right;
                        font-size: .48rem;
                        padding-right: .48rem;
                        border: none;
                        &:-ms-input-placeholder{
                             color: #aaa;
                             font-size: .48rem;

                        }
                    }
                    .file{
                        width: 2rem;
                        height: 1rem;
                        font-size: 10rem;
                        opacity: 0;
                        position: absolute;
                        right: 0;
                    }
                    .van-cell{
                        font-size: .48rem;
                        padding-right: .48rem;
                        padding: 0;
                        color: #aaa;
                        .van-field__control{
                            color: #aaa;
                        }
                    }

                }
            }
        }
    }
    .foot-button{
        margin-top: 2rem;
        margin-bottom: .4rem;
        .cancel-btn{
            margin-right: 1rem;
        }
    }
    #datetime-picker,#picker{
        position: fixed;
        width: 100%;
        bottom: 0;
    }
      .van-checkbox-group{
        clear: both;
        height: 2.5rem;
      }
      .vehicles{
        width: 25%;
        font-size: 14px;
        margin-bottom: 5px;
        float: left;
        margin-left: 25px;
      }
      .require{
        color: red;
        margin-right: 4px;
        font-style: inherit;
        font-size: 14px;
      }
</style>
